<template>
  <vxe-modal
      :zIndex='10'
      :showFooter='true'
      title='发票预览'
      ref='modal1'
      :resize="true"
      width='1000'
  >
    <div class="flex-app-continer1" style="overflow: auto;">
      <!-- 整体发票区域 -->
      <div class="invoice-area">
        <div class="box0">
          <div class="box0_ecode">
            <div class="ecode">二维码</div>
          </div>
          <div class="box0_title">
            <div class="title">{{ invoice.title }}</div>
            <div class="hr"></div>
          </div>
          <div class="box0_date">
            <div class="text">发票号码:<span style="color: black">{{ invoice.fphm }}</span></div>
            <div class="text">开票日期:<span style="color: black">{{ invoice.kprq }}</span></div>
          </div>
        </div>
        <div class="box1"><span class="bar-tit">购买方信息</span></div>
        <div class="box2">
          <div class="flex-invoice">
            <span class="item-tit">名称：</span>
            <vxe-input
                v-model="invoice.gmfmc"
                disabled
                maxlength="300"
                class="input"
            ></vxe-input>
          </div>
          <div class="flex-invoice">
            <div class="item-tit" style="margin-top: -21px;">
              纳税人识别号：
            </div>
            <vxe-input
                v-model="invoice.gmfnsrsbh"
                disabled
                maxlength="20"
                class="input"
            ></vxe-input>
          </div>
        </div>
        <div class="box3"><span class="bar-tit">销售方信息</span></div>
        <div class="box4">
          <div class="flex-invoice">
            <span class="item-tit">名称：</span>
            <vxe-input
                v-model="invoice.xsfmc"
                disabled
                maxlength="300"
                class="input"
            ></vxe-input>
          </div>
          <div class="flex-invoice">
            <div class="item-tit" style="margin-top: -21px;">
              纳税人识别号：
            </div>
            <vxe-input
                v-model="invoice.xsfnsrsbh"
                disabled
                maxlength="300"
                class="input"
            ></vxe-input>
          </div>
        </div>
        <div class="box5">
          <div class="table-area-invoice">
            <vxe-table
                :data="invoice.items"
                ref="xTable"
                border="none"
                show-overflow
                auto-resize
                resizable
                style="overflow: auto; width: 100%"
                height="240"
                :row-class-name="rowClassName"
                show-footer
                :footer-cell-class-name="footerCellClassName"
                :footer-method="footerMethod"
            >
              <vxe-column
                  field="xmmc"
                  title="项目名称"
                  type="html"
                  width="150"
              >
              </vxe-column>
              <vxe-column
                  field="ggxh"
                  title="规格型号"
                  width="80"
              >
              </vxe-column>
              <vxe-column
                  field="dw"
                  title="单位"
                  width="60"
              >
              </vxe-column>
              <vxe-column
                  field="sl"
                  title="数量"
                  width="100"
              >
              </vxe-column>
              <vxe-column
                  field="dj"
                  title="单价"
                  key="dj"
                  width="120"
              >
              </vxe-column>
              <vxe-column
                  field="je"
                  title="金额"
                  type="html"
                  key="je"
                  width="120"
              >
              </vxe-column>
              <vxe-column
                  field="slv"
                  title="税率/征收率"
                  width="120"
                  type="html"
              >
                <template v-slot="{ row,rowIndex }">
                  <span>{{ (row.slv * 100) + '%' }}</span>
                </template>
              </vxe-column>
              <vxe-column field="se" title="税额" width="80">
              </vxe-column>
            </vxe-table>
          </div>
        </div>
        <div class="box6">价税合计（大写）</div>
        <div class="box7">
          <vxe-button
              status="primary"
              type="text"
              disabled
              icon="fa fa-times-circle-o"
              style="flex: 1; color: #222; text-align: left"
          >
            {{ invoice.jshjdx }}
          </vxe-button>
          <span class="total-tit">（小写）</span>
          <div class="total-val">￥{{ invoice.jshjxx }}</div>
        </div>
        <div class="box8"><span class="bar-tit">备注</span></div>
        <div class="box9">
          <vxe-textarea
              v-model="invoice.bz"
              class="text-area"
              resize="none"
              disabled
              style="color: #bb8c91; border: none;height: 100%;"
              maxlength="450"
          ></vxe-textarea>
        </div>
        <div class='man-area'>
          <span class='man-input'>开票人：</span>
          <vxe-input v-model="invoice.kpr" maxlength='300' :disabled='true'></vxe-input>
        </div>
      </div>
    </div>
    <template v-slot:footer>
      <vxe-button @click="closeBox" status="primary">关闭</vxe-button>
    </template>
  </vxe-modal>

</template>
<script>
import {mixin} from '@/utils/mixin.js'
import {getInvoiceDetail} from "@/api/invoicedInfo";

export default {
  name: 'previewComp',
  mixins: [mixin],
  data() {
    return {
      fphm: '',
      invoice: {
        title: "",
        fphm: "",
        kprq: "",
        gmfmc: "",
        gmfnsrsbh: "",
        xsfmc: "",
        xsfnsrsbh: "",
        jshjdx: "",
        jshjxx: "",
        bz: "",
        kpr: "",
        items: [],
      },
      totalhsN: 0, //
    }
  },
  components: {},
  created() {
  },
  mounted() {

  },
  methods: {
    async goPreview(fphm) {
      let {code, data, msg} = await getInvoiceDetail(fphm)
      if (code == 200) {
        this.invoice = data
      } else {
        this.$message.error(msg)
      }
    },
    closeBox() {
      URL.revokeObjectURL(this.previewUrl)
      this.$refs.modal1.close()
    },
    show(fphm) {
      this.fphm = fphm
      this.goPreview(fphm)
      this.$refs.modal1.open()
    },
    footerCellClassName({$rowIndex, column, columnIndex}) {
      if (columnIndex === 0) {
        if ($rowIndex === 0) {
          return 'col-red'
        } else {
          return ''
        }
      }
    },
    rowClassName({row}) {
      return 'row'
    },
    footerMethod({columns, data}) {
      let k = this
      const footerData = [
        columns.map((column, _columnIndex) => {
          if (_columnIndex === 0) {
            return '合计'
          }
          if (['je', 'se'].includes(column.property)) {
            let tmp = this.sumNum(data, column.property)

            let tmpNumber = tmp.numberStr

            if (column.property == 'je') {
              k.totalbhs = tmpNumber
              k.totalbhsN = tmp.number
            }
            if (column.property == 'se') {
              k.seN = tmp.number
            }

            return tmp.numberStr
          }
          return null
        }),
      ]
      return footerData
    },
    sumNum(list, field) {
      let count = 0
      list.forEach((item) => {
        count += Number(item[field])
      })
      let n = count.toFixed(2)
      let n1 = Number(n).toLocaleString()
      let obj = {
        number: Number(n),
        numberStr: n1,
      }
      if (Number.isNaN(obj.number) || obj.number === 'NaN' || obj.numberStr === '0.00') {
        obj.number = 0;
      }
      if (Number.isNaN(obj.numberStr) || obj.numberStr === 'NaN' || obj.numberStr === '0.00') {
        obj.numberStr = 0;
      }
      return obj
    },
  },
}
</script>
<style lang="scss" scoped>

:v-deep .vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
  padding: 0
}

input::-ms-clear {
  width: 0;
  height: 0;
}

.invoice-area {
  position: relative;
  width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.box0 {
  width: 896px;
  height: 105px;
  opacity: 1;
  box-sizing: border-box;
  border: 1px solid #bb8c91;
  color: #bb8c91;
  border-bottom: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box0_ecode {
  width: 150px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;

  .ecode {
    border: 1px solid #bb8c91;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.box0_title {
  width: 570px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: wrap;

  .title {
    font-size: 32px !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hr {
    width: 400px;
    border: 1px solid #bb8c91;
    border-left: none;
    border-right: none;
    color: #bb8c91;
    height: 3px;
  }
}

.box0_date {
  width: 176px;

  .text {
    margin-bottom: 5px;
    font-size: 10px !important;
  }
}


.box1 {
  width: 28px;
  height: 105px;
  opacity: 1;
  box-sizing: border-box;
  border: 1px solid #bb8c91;
  color: #bb8c91;
  border-right: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box2 {
  width: 420px;
  height: 105px;
  opacity: 1;
  box-sizing: border-box;
  border: 1px solid #bb8c91;
  border-right: none;
  color: #bb8c91;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.box3 {
  width: 28px;
  height: 105px;
  opacity: 1;
  box-sizing: border-box;
  border: 1px solid #bb8c91;
  color: #bb8c91;
  border-right: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box4 {
  width: 420px;
  height: 105px;
  opacity: 1;
  box-sizing: border-box;
  border: 1px solid #bb8c91;
  color: #bb8c91;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.box5 {
  width: 896px;
  height: 262px;
  min-height: 190px;
  opacity: 1;
  box-sizing: border-box;
  border: 1px solid #bb8c91;
  border-top: none;
  border-bottom: none;
}

.box6 {
  width: 240px;
  height: 32.2px;
  opacity: 1;
  box-sizing: border-box;
  border: 1px solid #bb8c91;
  border-right: none;
  color: #bb8c91;
  text-align: center;
  line-height: 32.2px;
}

.box7 {
  width: 656px;
  height: 32.2px;
  opacity: 1;
  box-sizing: border-box;
  border: 1px solid #bb8c91;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #bb8c91;
}

.box8 {
  width: 28px;
  height: 73.5px;
  opacity: 1;
  box-sizing: border-box;
  border: 1px solid #bb8c91;
  border-right: none;
  border-top: none;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #bb8c91;
}

.box9 {
  width: 868px;
  height: 73.5px;
  opacity: 1;
  box-sizing: border-box;
  border: 1px solid #bb8c91;
  border-top: none;
  color: #bb8c91;
  overflow-y: auto;
}

.bar-tit {
  width: 20px;
  display: inline-block;
  text-align: center;
}

.flex-invoice {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 0px;
  width: 400px;
}

.input {
  flex: 1;
}

.invoice-area .vxe-table--header-wrapper,
.invoice-area .vxe-header--row,
.invoice-area .vxe-table--header {
  background-color: #fff;
  color: #bb8c91;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
}

.invoice-area .vxe-table--render-default .vxe-cell {
  font-size: 12px;
  font-weight: normal;
  text-align: center;
}

.gray {
}

.row {
  box-sizing: border-box;
  height: 24.5px;
  display: inline-block;
  line-height: 24.5px;
  margin-bottom: 5px;
}

.invoice-area
.vxe-table--render-default.vxe-editable.size--mini
.vxe-body--column,
.invoice-area
.vxe-table--render-default.size--mini
.vxe-header--column.col--ellipsis,
.invoice-area
.vxe-table--render-default.size--mini
.vxe-body--column.col--ellipsis,
.invoice-area
.vxe-table--render-default.size--mini
.vxe-footer--column.col--ellipsis {
  height: 24.5px;
  line-height: 24.5px;
}

.table-area-invoice {
  padding-left: 10px;
  height: 240px;
  overflow: auto;
  min-height: 160px;
  position: relative;
}

.col-red {
  color: #bb8c91;
}

.total-tit {
  color: #bb8c91;
}

.total-val {
  color: #bb8c91;
  display: inline-block;
  width: 40%;
}

.remark {
  padding: 10px;
  display: inline-block;
}

.search-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.red {
  color: #ea0000;
}

.info {
  width: 900px;
  margin: 0 auto;
}

.info-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.radio-tit {
  font-weight: bold;
}

.radio-item {
  margin-right: 20px;
  cursor: pointer;
}

.radio-icon {
  width: 15px;
  height: 15px;
  margin-right: 6px;
}

.box9 textarea {
  width: 100%;
  height: 100%;
  color: #bb8c91;
  border: none;
}

.man-area {
  margin-top: 12px;
  // margin-left: 60px;
}

.man-input {
  color: #bb8c91;
}

.add-fj {
  margin-right: 15px;
  cursor: pointer;
  color: #68d3cd;
}

.del-fj {
  cursor: pointer;
  color: #68d3cd;
}

.fj-area {
  margin-top: 10px;
  margin-bottom: 20px;
}

.form-tit {
  height: 14px;
  border-left: 3px solid #07b9b9;
  color: #1a1a1a;
  font-size: 12px;
  line-height: 14px;
  padding-left: 8px;
  font-weight: bold;
  width: 600px;
}

:deep .vxe-modal--wrapper .vxe-modal--box {
  overflow: auto;
}

:deep .vxe-modal--box {
  overflow: auto;
}
</style>